<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>菜单</title>
    <link rel="stylesheet" href="/static/plugin/layui/css/layui.css" media="all" />
    <script src="/static/plugin/jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="/static/plugin/layui/layui.js"></script>
    <script type="text/javascript" src="/static/js/base.js"></script>
    <style>
        .layui-table th{
            font-weight: bold;
            font-size: 16px;
        }
        .layui-table td{
            font-weight: bold;
            font-size: 16px;
        }
    </style>
</head>
    <body class="layui-anim layui-anim-up">
        <div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a>
                    <cite></cite>
                </a>
            </span>
        </div>

     <div class="x-body">

        <div class="layui-row">
            <xblock>
                <button class="layui-btn layui-btn-normal" id="add" style="font-weight: bold;font-size: 16px;"><i class="layui-icon layui-icon-add-circle-fine"></i>新增</button>
            </xblock>
            <table class="layui-hide" id="tableMenuList" lay-filter="tableMenuList"></table>
            <!--<script type="text/html" id="rowToolbar">
                <a class="layui-btn layui-btn-xs" lay-event="update"><i class="layui-icon layui-icon-edit"></i>编辑</a>
            </script>-->
        </div>
    </div>

    <div id="addDivID" style="display:none">

        <form class="layui-form" id="addFormID" >
            <div style="width:100%">
                <!--<div class="layui-form-item">-->
                    <!--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">-->
                        <!--<legend style="font-size:16px;">基础信息</legend>-->
                    <!--</fieldset>-->
                <!--</div>-->

                <div style="margin-top: 10px"></div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">父级菜单</label>
                            <div class="layui-input-block" style="width:190px;">
                            <select name="pid">
                                <option value="0">一级菜单</option>
                                <option th:each="jsonRootData:${jsonRootDataList}" th:value="${jsonRootData.permissionId}" th:text="${jsonRootData.permissionName}"></option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="permissionName"  autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">路径</label>
                        <div class="layui-input-inline">
                            <input type="text" name="permissionUrl"  autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">序号</label>
                        <div class="layui-input-inline">
                            <input type="number" value="0" name="seq"  autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">资源描述</label>
                        <div class="layui-input-inline">
                            <input type="text" name="permissionType"  autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

            </div>
        </form>
    </div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit" style="font-weight: bold;font-size: 16px;">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" style="font-weight: bold;font-size: 16px;">删除</a>
</script>

<script>
    layui.config({
        base: '/static/'
    }).extend({
        treetable: 'layui/treetable'
    }).use(['layer', 'table', 'treetable','upload','form'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var layer = layui.layer;
        var treetable = layui.treetable;
        var form=layui.form;
        var laydate = layui.laydate;


        treetable.render({
            treeColIndex: 1,//树形图标显示在第几列
            treeSpid: 0,//最上级的父级id
            treeIdName: 'permissionId',//id字段的名称
            treePidName: 'pid',//pid字段的名称
            treeDefaultClose: false,//是否默认折叠
            treeLinkage: true,//父级展开时是否自动展开所有子级
            elem: '#tableMenuList',
            page: false,
            url: '/menu/queryMenuPage',
            cols: [
                [
                    {type: 'numbers', title: '编号', width:50},
                    {field: 'permissionName', title: '资源名称'},
                    {field: 'permissionUrl', title: '资源路径'},
                    {field: 'permissionType', title: '资源简介'},
                    {field: 'seq', title: '排序'},
                    {title: '操作',toolbar: '#barDemo'}
                ]
            ],
            done : function() {
                $('th').css({
                    'background-color': '#3388CB', 'color': '#fff','font-weight':'bold',
                });
                treetable.foldAll('#tableMenuList');
                layer.closeAll('loading');
            }
        });

        var $ = layui.jquery, active = {
            reload:function () {
                table.reload('tableMenuList',{
                    method:'get'
                    ,where:{
                    }
                    ,page: {
                        curr: 1//重新从第 1 页开始
                    }
                });
            }
        }
        $('.layui-col-md12 .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        $('.select .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });



        //监听工具条
        table.on('tool(tableMenuList)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            //alert(layEvent)

            if (layEvent === 'del') {
                //layer.msg('删除' + data.id);
                layer.confirm('确定要删除任务么？', {
                    btn: ['确定','取消'] //按钮
                }, function(index){
                    $.ajax({
                        type : 'POST',
                        data : {'permissionId':data.id},
                        url:'/menu/delete',
                        success : function(data) {
                            if (data) {
                                layer.msg('删除成功',{icon: 1, time: 2000})
                            }else {
                                layer.msg("请联系管理员！", {icon: 2});
                            }
                        }
                    })

                    setTimeout(function(){
                        layer.close(index);
                        window.location.reload()
                    },1000);

                });



            } else if (layEvent === 'edit') {
                //layer.msg('修改' + data.id);
                layer.open({
                    id: 'user-add',
                    type: 2,
                    area: ['650px','450px'],
                    fix: false,
                    btn: ['更新', '取消'],
                    maxmin: true,
                    shadeClose: false,
                    shade: 0.4,
                    title: '编辑菜单',
                    content: '/menu/showUpdateMenu?permissionId='+data.id,
                    yes:function(index,layero) {
                        var iframeWindow = (layero).find("iframe")[0].contentWindow;
                        var value = iframeWindow.update();
                        if (value == 0) {
                            layer.msg("请联系管理员！", {icon: 2});
                            return;
                        }
                        layer.msg("更新成功！", {icon: 1});
                        setTimeout(function(){
                            window.location.reload()
                        },1000);
                    }
                });
            }





        })

        $('#select_icon').click(function(){
            parent.layer.open({
                id:'icon',
                type: 2,
                area: ['800px','600px'],
                shade: 0.4,
                zIndex: layer.zIndex,
                title: '图标',
                content: '/static/plugin/html/icon.html',

            });
        });

        $('#add').click(function () {
            layer.open({
                type: 1
                ,title: "菜单添加" //不显示标题栏
                ,closeBtn: false
                ,area: ['600px','450px']
                ,shade: 0.8
                ,btn: ['添加', '取消']
                ,moveType: 1 //拖拽模式，0或者1
                ,content: $('#addDivID')
                ,success: function(layero){
                },
                yes: function(index, layero){
                    if ($('input[name="permissionName"]').val() == null || $('input[name="permissionName"]').val() == "" ) {
                        layer.alert('资源名称不能为空',{icon :5})
                        return;
                    }
                    if ($('input[name="permissionUrl"]').val() == null || $('input[name="permissionUrl"]').val() == "" ) {
                       if ($('select[name="pid"]').val() != 0) {
                           layer.alert('资源路径不能为空',{icon :5})
                           return;
                       }
                    }
                    if ($('input[name="permissionType"]').val() == null || $('input[name="permissionType"]').val() == "" ) {
                        layer.alert('资源描述不能为空',{icon :5})
                        return;
                    }
                    $.ajax({
                        type : 'POST',
                        data : $('#addFormID').serialize(),
                        url:'/menu/add',
                        success : function(data) {
                            layer.msg('保存成功',{icon:6})
                        }
                    })
                    setTimeout(function(){
                        window.location.reload()
                    },1000);
                },
                cancel: function(index) {
                    return true;
                }
            });
        });
    });
</script>
</body>
</html>
